<template>
  <view>
    <page-meta>
      <navigation-bar/>
    </page-meta>

    <!-- v-bind 属性值操纵 -->
    <button :class="{class1:a[0],class2:a[1],class3:a[2]}" @click="changeClass">
      改变颜色
    </button>
    <!-- 操控组件属性 -->
    <view class="content">
      <button @click="buttonEnable=true" :disabled="buttonEnable">只能点一次</button>
    </view>

    <button  @click="increase" class="buttonjj">
        +
    </button>
    <button  @click="decrease" class="buttonjj">
        -
    </button>

    <!--操控具体数值-->
    <image class="ima" v-bind:style="{height:size+'px',width:size+'px'}"></image>



  </view>
</template>

<script>
export default {
  data() {
    return {
      a:[false,false,false],
      t:0,  //第几种颜色
      buttonEnable:false,
      size:100
    };
  },
  onLoad() {

  },
  mounted() {

  },
  methods: {
    changeClass:function () {
      this.t++
      this.t = this.t%3
      if(this.t==0){
        this.a[0]=true
        this.a[1]=false
        this.a[2]=false
      }else if(this.t==1){
        this.a[0]=false
        this.a[1]=true
        this.a[2]=false
      }else{
        this.a[0]=false
        this.a[1]=false
        this.a[2]=true
      }
    },
    increase: function () {
      this.size+=10
    },
    decrease: function () {
      this.size-=10
    }
  }
}
</script>

<style lang="scss">
.class1{
  background-color: #3cc51f;
}
.class2{
  background-color: #c51f1f;
}
.class3{
  background-color: #0034ff;
}
button{
  margin: 10px;
  padding: 10px;

}

.buttonjj{
  margin: 10px;
  padding: 10px;

}
.ima{   //图片设置
  background-image: url(https://zhoukaiwen.com/img/loginImg/head.png);
  width: 100%;  //
  background-size: 100%;

}


</style>
